<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import service from '../../../utils/service'

const arr: any = []
const arr1: any = []

onMounted(() => {
  service({
      url: 'data/simpleData'
  }).then(res => {
      if (res.data.code === '200') {
          res.data.data.forEach((item: any) => {
              arr.push(item.x)
              arr1.push(item.val)
          })
          // console.log(arr)
          // console.log(arr1)
      }
  }).then(() => {
      aa()
  })

})
// 基于准备好的dom，初始化echarts实例
const aa = () => {
  var myChart = echarts.init(document.getElementById('main') as HTMLElement);
  // 绘制图表
  myChart.setOption({
      title: {
          text: 'ECharts数据分析'
      },
      tooltip: {},
      xAxis: {
          data: arr
      },
      yAxis: {},
      series: [
          {
              type: 'line',
              data: arr1
          }
      ]
  });

}

</script>

<style scoped>
#main {
  width: 900px;
  height: 450px;
  margin: auto;
}
</style>